<template>
  <div class="hot-list">
    <div class="hot-list-list">
      <div class="hot-list-list-it" v-for="(item,index) in data" :key="item.id" :class="{'cur':item.id===cur}" @mouseover="cur=item.id">
        <template v-if="item">
          <div class="it-closed" @click="gotoDetail(item, router, axios)">
            <span :class="'index_' + (index+1)">{{ index+1 }}</span>
            <span>{{ item.name }}</span>
          </div>
          <div class="it-open" @click="gotoDetail(item, router, axios)">
            <div class="image">
              <img :src="item.icon" />
            </div>
            <div class="content">
              <div class="inner">
                <span>{{ item.size }}</span>
                <el-rate
                  v-model="item.recommendIndex"
                  disabled
                  text-color="#ff9900"
                >
                </el-rate>
              </div>
              <div>
                <button
                  class="button is-small is-theme-button"
                  style="height: 24px"
                  @click.stop="downloadUrl(item.highSpeedUrlOne),item.id"
                >
                  下载
                </button>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { gotoDetail } from "@/utils/action.js";
import { useRoute, useRouter } from "vue-router";
const router = ref(useRouter());

const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
});
const cur = ref(props.data[0].id)
const star = ref(5);
</script>

<style lang="less" scoped>
.hot-list {
  display: flex;
  flex-direction: column;

  background: #ffffff;
  border-radius: 8px;
  // border: 1px solid #f5f7f8;

  &-list {
    display: flex;
    flex-direction: column;
    padding: 10px 10px 14px 10px;

    &-it {
      padding: 0 10px;
      display: flex;
      flex-direction: column;
      cursor: pointer;
      margin: 7.5px 0;
      height: 30px;
      border-radius: 8px;
      &:hover {
        background-color: #eee;
      }
    }
    .cur {
      padding: 6px 10px;
        height: auto;
        background-color: #eee;
        .it-open {
          opacity: 1;
          height: auto;
        }
      }
    .it-closed {
      display: flex;
      align-items: center;
      cursor: pointer;

      span:first-child {
        margin-right: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        background: #f5f7f8;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 500;
        color: #93999e;
        line-height: 14px;
      }

      span:last-child {
        font-size: 16px;
        font-weight: 400;
        color: #1d2127;
        line-height: 16px;
      }

      .index_1 {
        background: #f54446 !important;
        color: #fff !important;
      }

      .index_2 {
        background: #f9b002 !important;
        color: #fff !important;
      }

      .index_3 {
        background: #47b752 !important;
        color: #fff !important;
      }
    }

    .it-open {
      display: flex;
      opacity: 0;
      margin: 10px 0px 10px 30px;

      // .stars {
      //   display: inline-flex;
      //   margin-left: 5px;
      //   color: #f9b002;
      //   font-size: 13px;
      // }

      .image {
        margin-right: 10px;
        img {
          width: 60px;
          height: 60px;
          border-radius: 6px;
        }
      }

      .content {
        display: flex;
        flex-direction: column;
        .inner {
          height: 25px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          span {
            margin-top: 0px;
            font-size: 14px;
            font-weight: 400;
            color: #545759;
            line-height: 14px;
          }

          /deep/.el-rate {
            margin-top: -5px;
            margin-left: 5px;
          }
          /deep/.el-rate__icon {
            margin-right: 0px;
          }
        }
        div:last-child {
          margin-top: 10px;
        }
      }
    }
  }

  &-top {
    // height: 80px;
    // background: linear-gradient(
    //   180deg,
    //   #558081 0%,
    //   rgba(142, 183, 183, 0.77) 100%
    // );
    border-radius: 8px 8px 0px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 28px;

    &-left {
      display: flex;
      flex-direction: column;
      padding: 0 20px;

      span:first-child {
        font-size: 20px;
        font-weight: bold;
        color: #1d2127;
        line-height: 28px;
      }
    }

    &-right {
      span {
        cursor: pointer;
        font-size: 14px;
        font-weight: bold;
        color: #ffffff;
        line-height: 20px;
      }
    }
  }
}
</style>
